<script setup lang="ts">
import { computed } from "vue";
import { getSize } from "../utils";

interface UploadProps {
  width?: number | string;
  height?: number | string;
  limit?: number;
  placeholder?: string | string[];
}

const props = withDefaults(defineProps<UploadProps>(), {
  width: 100,
  height: 100,
  limit: 1,
  placeholder: "上传图片",
});

const styles = computed<any>(() => {
  return {
    width: props.width ? getSize(props.width) : null,
    height: props.height ? getSize(props.height) : null,
  };
});
</script>

<template>
  <div class="umrp-upload">
    <div class="photo" :style="styles" v-for="(_, key) in limit">{{ Array.isArray(placeholder) ? placeholder[key] : placeholder }}</div>
  </div>
</template>

<style lang="scss" scoped>
.umrp-upload {
  display: flex;
  gap: 16px;

  .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px dashed #ccc;
    background-color: var(--bg-color);
  }
}
</style>
